<template>
  <view class="ver-layout">
    <view class="top-layout">本月(2)</view>
    <view class="history-list">
      <block v-if="historyList.length>0">
        <view class="history-item hor-layout" v-for="(item,index) in historyList" :key="index">
          <image class="history-user-icon" :src="item.avatar?item.avatar:ic_teacher_man_default"></image>
          <view class="history-content ver-layout">
            <view class="content-title hor-layout-side-center">
              <view class="break-title">{{ item.note }}</view>
              <view class="push-time">{{ item.time }}</view>
            </view>
            <view class="break-info">请假类型:{{ item.type }}</view>
            <view class="break-info">开始时间:{{ item.start_time }}</view>
            <view class="break-info">结束时间:{{ item.end_time }}</view>
            <view class="break-state hor-layout-side-center">
              <view class="state-title" :style="{color:getApprovalItemState(item).color}">{{ getApprovalItemState(item).text }}</view>
              <view class="break-action-layout hor-layout-center" style="display: none">
                <view class="action-btn">撤销</view>
                <view class="action-divider"></view>
                <view class="action-btn">修改</view>
              </view>
            </view>
          </view>
        </view>
      </block>
      <view v-else class="list-no-data">暂无数据</view>
    </view>
  </view>
</template>

<script>
import {AskBreakApprovalApi} from "@/api/askBreak.js"

let engine = new AskBreakApprovalApi()
let ic_teacher_man_default = require("@/static/home/ic_teacher_man_default.png")
export default {
  name: "breakHistory",
  data() {
    return {
      ic_teacher_man_default,
      breakObj: {},
      historyList: []
    }
  },
  onLoad(options) {
    this.breakObj = options
    this.getApprovalHistory()
  },
  methods: {
    getApprovalItemState(item){
      let stateMap = {
        0: {text: '审批被拒绝', color: '#FF1111'},
        1: {text: '等待我处理', color: '#DB973B'},
        2: {text: '审批通过', color: '#42B4AB'},
        undefined: {text: '', color: ''}
      }
      return stateMap[item.status]
    },
    getApprovalHistory() {
      let {leave_type, user_id} = this.breakObj
      engine.getApprovalHistory({leave_type, user_id}).then(res => {
        this.historyList = res.data
      })
    }
  }
}
</script>

<style scoped>
.top-layout {
  z-index: 100;
  position: fixed;
  width: 100%;
  height: 30px;
  background: #F8F8F8;
  padding-left: 22px;
  line-height: 30px;
  /* 文本样式 */
  font-size: 14px;
  color: #9A9A9A;
}

.history-list {
  margin-top: 30px;
}

.history-item {
  padding: 20px 0px;
  width: 100%;
  border-bottom: 1px solid #EAEAEA;
}

.history-user-icon {
  margin-left: 13px;
  width: 36px;
  height: 36px;
  background: #42B4AB;
  border-radius: 6px;
  flex-shrink: 0;
}

.history-content {
  margin: 0px 13px;
  width: calc(100% - 26px);
}

.content-title {
  width: 100%;
  margin-bottom: 6px;
}

.break-title {
  font-size: 16px;
  line-height: 16px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #101010;
}

.push-time {
  font-size: 12px;
  line-height: 12px;
  font-family: PingFang SC;
  color: #B3B3B3;
}

.break-info {
  margin-top: 6px;
  font-size: 13px;
  line-height: 13px;
  font-family: PingFang SC;
  color: #8A8A8A;
}

.break-state {
  margin-top: 10px;
  width: 100%;
}

.state-title {
  line-height: 13px;
  font-size: 13px;
  color: #DB973B;
}

.break-action-layout > * {
  font-size: 15px;
  color: #0059E5;
}

.action-btn {
  font-weight: bold;
}

.action-divider {
  margin: 0px 23px;
  width: 1px;
  height: 11px;
  background: #B5B5B5;
}
</style>
